<template>
  <el-main id="shortMsgGroup">
    <div class="memberNav" @click.native="closeInfo">
      {{namepage}}
      <el-upload
        style="float:right"
        ref="upload"
        action="/wm/upload/"
        :show-file-list="false"
        :auto-upload="false">
        <el-button slot="trigger" icon="el-icon-upload" size="small" type="primary" style="">名单导入</el-button>
        <el-button plain @click="download" size="small">下载模板</el-button>
      </el-upload>
    </div>
    <div class="main" :style="'padding: 20px;height:'+height+'px !important'">
      <el-table :data="tableData3" size="mini" :height="height" stripe style="width: 100%">
        <el-table-column prop="time" label="上传时间" width="180" sortable></el-table-column>
        <el-table-column prop="name" label="上传文件名称" width="180"></el-table-column>
        <el-table-column label="导入提示">
          <template slot-scope="scope">
              <span>{{'成功'+scope.row.success+'条，失败'+scope.row.failed+'条'}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="sendList(scope.row.id)">短信群发</el-button>
            <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="foot">
      <el-pagination size="mini" background layout="total,sizes,prev, pager, next" :total="1000"></el-pagination>
    </div> -->
    <groupList></groupList>
    <failureList></failureList>
  </el-main>
</template>
<script>
import groupList from "./groupList.vue";
import failureList from "./failureList.vue";
import XLSX from "xlsx";
// var urls="http://192.168.1.52:8802";
export default {
  data() {
    return {
      namepage: "短信群发",
      tableData3: [
        // {
        //   date: "2016-05-07",
        //   name: "服务名单",
        //   address: "总共20条，失败0条"
        // }
      ],
      height: ""
    };
  },
  components: {
    groupList,
    failureList
  },
  created() {
    this.groupList()
  },
  methods: {
    del(id) {
      //删除名单
      let that=this
      this.$confirm("此操作将永久删除文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url="/api/sms//orderSmsLog/delete?id="+id
          this.$http({
                url: url,
                method: "POST",
              })
                .then(res => {
                  console.log(res)
                  if(res.data.status==200){
                    this.groupList()
                    that.$message({
                      type: "success",
                      message: "删除成功!"
                    });
                  }
                })
                .catch(error => {
                  that.$message.error('删除失败！');
                });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    importList(obj) {},
    groupList(){
      let that=this
      let url="/api/sms/orderSmsLog/queryList"
      this.$http({
            url: url,
            method: "GET",
            headers: { "Content-Type": "application/json;charset=utf-8" },
            data: {}
          })
            .then(res => {
              let data=res.data.info
              console.log(data)
              if(res.data.status==200){
                that.tableData3=data
              }else{
                this.$message({
                  message: '服务器在偷懒！',
                  type: 'warning'
                });
              }
            })
            .catch(error => {
              console.log(error);
            });
    },
    seeFailureList(failList) {
      //查看失败名单
      this.$root.$emit("seeFailureList", "no",failList);
    },
    sendList(id) {
      //发送短信名单
      this.$root.$emit("sendList",id);
    },
    readExcel(e) {
      var that=this
      const files = e.target.files;
      let param = new FormData();
      //通过append向form对象添加数据
      param.append("file", files[0]);
      //FormData私有类对象，访问不到，可以通过get判断值是否传进去
      console.log(param.get("file"));
      let config = {
        //添加请求头
        headers: { "Content-Type": "multipart/form-data" }
        //添加上传进度监听事件
      };
      // let url="/api/sms/orderSms/importExcel";
      // let url="http://101.89.175.155:8802/orderSms/importExcel"   //测试服务
      let url="http://47.100.51.41:8802/orderSms/importExcel"     //正式服务
      this.$http.post(url, param, config)
        .then(function(response) {
          if(response.data.status==200 ){
            that.groupList()
            if(response.data.info.length>0){
              that.seeFailureList(response.data.info)
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      
    },
    download(){ //下载模板
      let that=this

      let url="/api/sms/orderSms/excelOut"
      this.$http({
            url: url,
            method: "GET",
            responseType: 'arraybuffer'
          })
            .then(res => {
              console.log(res)
              var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
              var href = URL.createObjectURL(blob); //创建下载的链接
              window.location.href=href;
            })
            .catch(error => {
              console.log(error);
            });
    }
  },
  mounted() {
    this.$refs.upload.$el
      .querySelector(".el-upload__input")
      .addEventListener("change", e => {
        console.log(e);
        this.readExcel(e);
      });
    let height = `${document.documentElement.clientHeight}`;
    this.height = parseInt(height) - 230;
  }
};
</script>
<style lang="less" scoped>
#shortMsgGroup {
  color: #222222;
  background: #ffffff;
  padding: 0px;
  .memberNav {
    height: 60px;
    font-size: 20px;
    font-weight: 500;
    color: #253a4d;
    font-family: "微软雅黑";
    box-shadow: 0px -3px 22px -1px #eeeeee;
    border-bottom: #eeeeee solid 1px;
    padding: 0 20px;
    line-height: 60px;
    .el-button{
      margin-right: 10px;
    }
    .add {
      font-weight: 700;
      color: #3399ff;
      float: right;
      font-size: 14px;
      cursor: pointer;
    }
    .main {
      padding: 20px;
      overflow: hidden;
      background: #f5f5f5;
    }
    .el-upload {
      float: right;
    }
  }
  .foot {
    text-align: right;
    padding: 0 60px;
    line-height: 40px;
  }
  .el-table--border {
    box-sizing: border-box;
  }
  .el-table::before {
    height: 0px !important;
  }
}
</style>


